<template>
  <div>
    <div class="router-content">
      <div v-if="pageType == 'list'">
        <QueryBar
          :queryForm="queryForm"
          :queryConfig="queryBar"
          @handleQueryClick="handleQueryClick"
        />

        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="index" label="序号" width="50">
            <template slot-scope="scope">{{
              10 > scope.$index + 1
                ? "0" + (scope.$index + 1)
                : scope.$index + 1
            }}</template>
          </el-table-column>

          <el-table-column prop="realName" label="姓名"></el-table-column>

          <el-table-column
            prop="contactNumber"
            label="联系电话"
          ></el-table-column>
          <el-table-column
            prop="companyName"
            label="企业名称"
          ></el-table-column>
          <el-table-column prop="member" label="是否会员">
            <template slot-scope="scope">
              {{ scope.row.member ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column prop="abilityName" label="服务类型">
          </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              {{
                scope.row.state == 1
                  ? "未处理"
                  : scope.row.state == 2
                  ? "处理中"
                  : scope.row.state == 3
                  ? "已处理"
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="申请时间">
            <template slot-scope="scope">
              {{ scope.row.createTime | formatTime }}
            </template>
          </el-table-column>

          <el-table-column label="操作" :width="188">
            <template slot-scope="scope">
              <el-tag
                v-if="query"
                @click="handleOptions({ key: '1', index: scope.$index })"
                size="medium"
                style="margin: 0 5px 0 0; cursor: pointer"
                >详情</el-tag
              >

              <el-tag
                v-if="update"
                @click="handleOptions({ key: '2', index: scope.$index })"
                size="medium"
                style="cursor: pointer"
                >状态标记</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 50px"
          @current-change="handlePageChange"
          :current-page="pageParams.pageNum"
          :page-sizes="[pageParams.pageSize]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
      <div v-else>
        <div>
          <h5>客户信息</h5>
          <el-form
            label-width="120px"
            ref="formModel"
            style="width: 80%; margin: 32px auto"
          >
            <el-form-item label="企业名称：">
              {{ formModel.companyName }}</el-form-item
            >

            <el-form-item label="姓名：">
              {{ formModel.realName }}
            </el-form-item>
            <el-form-item label="联系电话：">
              {{ formModel.contactNumber }}
            </el-form-item>
            <el-form-item label="是否会员：">
              {{ formModel.member ? "是" : "否" }}
            </el-form-item>
            <el-form-item label="备注：">
              {{ formModel.applyRemark }}</el-form-item
            >

            <el-form-item label="服务类型：">
              <el-table
                :data="
                  formModel.abilities.filter((item) => {
                    return item.selected;
                  })
                "
                style="width: 300px"
                border
              >
                <el-table-column type="index" label="序号" width="80">
                  <template slot-scope="scope">
                    <el-checkbox disabled v-model="checked"></el-checkbox>
                    {{
                      10 > scope.$index + 1
                        ? "0" + (scope.$index + 1)
                        : scope.$index + 1
                    }}
                  </template>
                </el-table-column>

                <el-table-column
                  prop="abilityName"
                  label="类型"
                ></el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item style="margintop: 20px">
              <el-button
                type="primary"
                @click="pageType = 'list'"
                :loading="$store.state.subLoading"
                >返回</el-button
              ></el-form-item
            >
          </el-form>
        </div>
      </div>

      <Modal
        title="
         选择状态
        "
        :dialogVisible="visible"
        :loading="$store.state.subLoading"
        @handleClose="handleCancel"
        @handleConfirm="handleConfirm"
        width="600px"
      >
        <el-radio-group v-model="radio">
          <el-radio :label="1">未处理</el-radio>
          <el-radio :label="2">处理中</el-radio>
          <el-radio :label="3">已处理</el-radio>
        </el-radio-group>
      </Modal>
    </div>
  </div>
</template>

<script>
import api from "@/api/modules/apply/energize.js";
import QueryBar from "@/components/common/QueryBar.vue";
import { queryBar } from "./configuration/energize.js";
import Modal from "@/components/common/Modal.vue";
import util from "@/utils";
export default {
  components: { QueryBar, Modal },
  data() {
    return {
      query: true,
      update: true, //按钮权限

      checked: true,
      radio: "",
      queryForm: {},
      queryBar: queryBar,
      pageType: "list",
      visible: false,
      currentRow: "",
      tableData: [],
      count: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
      timeRange: [],
      formModel: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 设置页面按钮权限
      let btns = this.$store.state.userInfo.list[4].children[1];
      this.query = btns.children[0].havePermission;
      this.update = btns.children[1].havePermission;

      this.getData(this.pageParams);
    });
  },
  methods: {
    getData(params) {
      api.getAbilityApplyPage(params ? params : this.pageParams).then((res) => {
        this.tableData = res.data;
        this.count = +res.count;
      });
    },
    handleQueryClick(val) {
      switch (val) {
        case "search":
          if (this.queryForm.timeRange) {
            let obj = {
              realName: this.queryForm.realName,
              contactNumber: this.queryForm.contactNumber,

              member: this.queryForm.member,
              state: this.queryForm.state,
              startTime: util.formatTime(this.queryForm.timeRange[0]),
              endTime: util.formatTime(this.queryForm.timeRange[1]),
            };
            this.pageParams.pageNum = 1;
            this.getData({ ...this.pageParams, ...obj });
          } else {
            console.log(this.queryForm);
            this.pageParams.pageNum = 1;
            this.getData({ ...this.pageParams, ...this.queryForm });
          }
          break;
        case "reset":
          Object.keys(this.queryForm).forEach((item) => {
            this.queryForm[item] = "";
          });
          this.pageParams.pageNum = 1;
          this.getData(this.pageParams);
          break;
      }
    },
    handlePageChange(val) {
      this.pageParams.pageNum = val;
      this.getData({ ...this.pageParams, ...this.queryForm });
    },
    handleOptions(val) {
      const { key, index } = val;
      this.currentRow = this.tableData[index];
      switch (key) {
        case "1":
          api
            .getAbilityApply({
              applyId: this.currentRow.applyId,
            })
            .then((res) => {
              this.formModel = res.data;
              this.pageType = "details";
            });

          break;
        case "2":
          this.visible = true;
          break;
      }
    },
    handleCancel() {
      this.radio = "";
      this.visible = false;
    },
    handleConfirm() {
      if (!this.radio) {
        return this.$message.warning("请先选择状态");
      }
      api
        .setAbilityApplyState({
          applyId: this.currentRow.applyId,
          state: this.radio,
        })
        .then((res) => {
          this.$message.success("标记成功");
          this.radio = "";
          this.visible = false;
          this.getData()
        });
    },
  },
};
</script>
<style lang="less" scoped>
h5 {
  font-size: 24px;
}
.el-form-item {
  margin: 0;
}
.project {
  .box {
    width: 80%;
    margin: 32px auto;
    overflow: auto;
    p {
      margin-bottom: 30px;
      font-size: 18px;
      font-weight: 600;
    }
  }
}
.btn {
  margin-top: 10px;
  text-align: left;
  padding-left: 120px;
  button {
    width: 120px;
  }
}
</style>
